<template>
  <div class="hello">
    <el-dialog
      :visible.sync="show"
      append-to-body
      width="821px"
      top="calc(50vh - 208px)"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="login-body f f-ac">
        <div class="login-body-left f f-col f-ac f-jc">
          <div class="login-label mb-10">林芝群艺馆</div>
          <!-- <div class="login-sub-label mb-10">SSP Management Platform</div> -->
          <img src="../assets/logo2.png" />
        </div>
        <div class="login-body-right f-1">
          <div class="login-title f f-ac f-js">
            <div
              class="func-item"
              v-for="(i, k) in funcList"
              :key="k"
              :class="{
                checked: current == i.value,
              }"
              @click="handleFunc(i)"
            >
              {{ i.label || '-' }}
            </div>
            <div
              class="unBorder"
              :class="current == 'code' ? 'move_right' : 'move_left'"
            />
            <i class="el-icon-close" @click="handleClosed" />
          </div>
          <div v-if="formType == 'login'" class="login-main">
            <el-input
              v-model="loginForm.mobile"
              placeholder="请输入手机号"
              maxlength="11"
              class="mb-20"
              clearable
            >
              <i
                slot="prefix"
                class="el-icon-user-solid"
                style="color: #193980; padding: 12px 5px"
              />
            </el-input>
            <el-input
              v-if="current == 'account'"
              v-model="loginForm.password"
              placeholder="请输入登录密码"
              prefix-icon="el-icon-unlock"
              type="password"
              class="mb-20"
              show-password
              maxlength="20"
              clearable
            />
            <!-- <el-input v-if="current == 'code'" v-model="loginForm.code" placeholder="请输入验证码"
                            prefix-icon="el-icon-unlock" class="mb-20" maxlength="6" clearable>
                            <div slot="suffix" class="login-code" @click="handleSms">
                                {{ codeLabel }}
                            </div>
                        </el-input> -->
            <div class="f f-ac f-jb mb-30">
              <el-checkbox v-model="loginForm.remember"
                >记住登录状态</el-checkbox
              >
              <span @click="changeLogin('forget')">忘记密码？</span>
            </div>
            <div class="login-btn f f-ac f-jc mb-20" @click="handleLogin">
              登录
            </div>
            <div class="f f-ac f-je" style="color: #777">
              还没有账号？
              <span @click="changeLogin('register')">立即注册</span>
            </div>
          </div>
          <div v-else-if="formType == 'forget'" class="login-main">
            <el-input
              v-model="loginForm.mobile"
              placeholder="请输入手机号"
              maxlength="11"
              class="mb-20"
              clearable
            >
              <i
                slot="prefix"
                class="el-icon-user-solid"
                style="color: #193980; padding: 12px 5px"
              />
            </el-input>
            <el-input
              v-model="loginForm.code"
              placeholder="请输入验证码"
              prefix-icon="el-icon-link"
              class="mb-20"
              maxlength="6"
              clearable
            >
              <div
                slot="suffix"
                class="login-code"
                @click="handleSms(formType)"
              >
                {{ codeLabel }}
              </div>
            </el-input>
            <el-input
              v-model="loginForm.password"
              placeholder="请输入新密码"
              prefix-icon="el-icon-unlock"
              type="password"
              class="mb-20"
              show-password
              maxlength="20"
              clearable
            />
            <el-input
              v-model="loginForm.password2"
              placeholder="请重复新密码"
              prefix-icon="el-icon-unlock"
              type="password"
              class="mb-20"
              show-password
              maxlength="20"
              clearable
            />
            <div class="login-btn f f-ac f-jc mb-20" @click="handleForget">
              确认
            </div>
            <div class="f f-ac f-je" style="color: #777">
              还没有账号？
              <span @click="changeLogin('register')">立即注册</span>
            </div>
          </div>
          <div v-else class="login-main">
            <el-select
              v-model="loginForm.type"
              placeholder="请选择账号类型"
              maxlength="11"
              class="mb-20"
              style="width: 100%"
              clearable
            >
              <i
                slot="prefix"
                class="el-icon-user-solid"
                style="color: #193980; padding: 12px 5px"
              />
              <el-option label="机构" value="2" />
              <el-option label="个人" value="1" />
            </el-select>
            <el-input
              v-model="loginForm.nickname"
              :placeholder="`请输入${
                loginForm.type == '2' ? '机构名称' : '用户名'
              }`"
              maxlength="11"
              class="mb-20"
              style="width: 100%"
              clearable
            >
              <i
                slot="prefix"
                class="el-icon-user-solid"
                style="color: #193980; padding: 12px 5px"
              />
            </el-input>
            <el-input
              v-model="loginForm.password"
              placeholder=""
              prefix-icon="el-icon-unlock"
              type="password"
              class="mb-20"
              show-password
              maxlength="20"
              clearable
            />
            <el-input
              v-model="loginForm.password2"
              placeholder="请再次输入密码"
              prefix-icon="el-icon-unlock"
              type="password"
              class="mb-20"
              show-password
              maxlength="20"
              clearable
            />
            <el-input
              v-model="loginForm.mobile"
              placeholder="请输入手机号码"
              prefix-icon="el-icon-mobile-phone"
              class="mb-20"
              maxlength="11"
              clearable
            />
            <el-input
              v-model="loginForm.code"
              placeholder="请输入验证码"
              prefix-icon="el-icon-link"
              class="mb-20"
              maxlength="6"
              clearable
            >
              <div
                slot="suffix"
                class="login-code"
                @click="handleSms(formType)"
              >
                {{ codeLabel }}
              </div>
            </el-input>
            <!-- type="password" show-password -->
            <el-input
              v-if="loginForm.type == '2'"
              v-model="loginForm.credit_code"
              placeholder="请输入信用代码"
              prefix-icon="el-icon-document"
              class="mb-20"
              maxlength="20"
              clearable
            />
            <el-upload
              v-if="loginForm.type == '2'"
              :show-file-list="false"
              :action="uploadUrl"
              :before-upload="handleBeforeUpload"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
            >
              <img
                v-if="loginForm.business_license"
                :src="loginForm.business_license"
                class="license"
              />
              <div class="uploader" v-else>
                <i class="el-icon-upload2" />
                点击上传营业执照
              </div>
            </el-upload>
            <div
              class="f f-ac f-js mb-30"
              :class="{ 'mt-20': loginForm.type == '2' }"
            >
              <el-checkbox v-model="isPass"> 勾选同意 </el-checkbox>
              <span @click="handleRe">《用户服务协议》</span>与
              <span @click="handleCo">《隐私协议》</span>
            </div>
            <div class="login-btn f f-ac f-jc mb-20" @click="handleRegister">
              注册
            </div>
            <div class="f f-ac f-je" style="color: #777">
              已有账号？
              <span @click="changeLogin('login')">立即登录</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  userRegister,
  userLogin,
  send,
  userResetpwd,
} from '@/utils/home/index.js';
import { encrypt } from '@/utils/jsencrypt';
import { setToken } from '@/utils/auth';
export default {
  props: {
    // 弹窗显示
    value: {
      type: Boolean,
      default: false,
    },
    // 类型
    type: {
      type: String,
      default: '',
    },
  },
  computed: {
    // 弹窗显示
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit('input', false);
      },
    },
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + '/pc/index/upload', // 上传的图片服务器地址
      formType: '', // 表单类型
      current: '', // 当前功能
      funcList: [], // 菜单功能列表
      loginForm: {
        type: '1', // 账号类型
        nickname: '', // 账号
        password: '', // 密码
        password2: '', // 确认密码
        mobile: '', // 手机号码
        code: '', // 验证码
        credit_code: '', // 信用代码
        business_license: '', // 营业执照
        remember: false, // 记住登录状态
      },
      timer: null, // 定时器
      codeLabel: '发送验证码', // 验证码按钮文字
      isPass: false, // 是否同意协议
    };
  },
  watch: {
    // 监听弹窗显示
    value(v) {
      if (v) {
        this.formType = this.type;
        this.init();
      }
    },
    // 监听表单类型
    formType() {
      this.init();
    },
  },
  onload() {
    this.loginForm.mobile = localStorage.getItem('mobile')
      ? localStorage.getItem('mobile')
      : '';
    this.loginForm.password = localStorage.getItem('password')
      ? localStorage.getItem('password')
      : '';
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      // 获取富文本组件实例
      let quill = this.Quill;
      // 如果上传成功
      if (res.code == 200) {
        this.loginForm.business_license =
          process.env.VUE_APP_BASE_API + res.data[0];
        console.log(
          this.loginForm.business_license,
          'this.loginForm.business_license',
        );
      } else {
        this.$message.error('图片插入失败');
      }
    },
    handleUploadError() {
      this.$message.error('图片插入失败');
    },
    // 初始化表单
    init() {
      if (this.timer) {
        this.codeLabel = '发送验证码';
        clearInterval(this.timer);
        this.timer = null;
      }
      this.funcList = [];
      if (this.formType == 'login') {
        this.funcList.push({
          value: 'account',
          label: '账号登录',
        });
        // this.funcList.push({ value: "code", label: "短信登录" });
      } else if (this.formType == 'forget') {
        this.funcList.push({
          value: 'forget',
          label: '忘记密码',
        });
      } else {
        this.funcList.push({
          value: 'register',
          label: '注册账户',
        });
      }
      this.current = this.funcList[0].value;
    },
    // 关闭弹窗
    handleClosed() {
      this.show = false;
    },
    // 功能切换
    handleFunc(v) {
      this.current = v.value;
    },
    // 发送验证码
    handleSms(v) {
      if (this.loginForm.mobile == '') {
        this.$message({
          message: '手机号不能为空',
          type: 'error',
        });
        return;
      }
      let event = v == 'register' ? v : 'resetpwd';
      if (this.timer) return;
      this.timer = setInterval(() => {
        if (this.codeLabel == '发送验证码') {
          console.log('1');
          send({
            mobile: this.loginForm.mobile,
            event: event,
          }).then((item) => {
            if (item.code == 200) {
              this.$message({
                message: item.msg,
                type: 'success',
              });
              this.codeLabel = '60s后重发';
            } else {
              clearInterval(this.timer);
              this.timer = null;
            }
          });
        } else {
          let num = parseInt(this.codeLabel);
          if (num > 1) {
            this.codeLabel = `${num - 1}s后重发`;
          } else {
            this.codeLabel = '发送验证码';
            clearInterval(this.timer);
            this.timer = null;
          }
        }
      }, 1000);
    },
    // 切换表单类型
    changeLogin(v) {
      this.formType = v;
    },
    // 密码格式验证
    CheckPassWord(password) {
      //必须为字母加数字且长度不小于8位
      var str = password;
      if (str == null) {
        return false;
      }
      // var reg1 = new RegExp(/^[0-9A-Za-z]+$/);
      // if (!reg1.test(str)) {
      //     return false;
      // }
      // var reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/);
      // if (reg.test(str)) {
      //     return true;
      // } else {
      //     return false;
      // }
    },
    // 用户服务协议
    handleRe() {
      this.$router.push({
        path: '/user/agreementRe',
      });
      this.show = false;
    },
    // 隐私协议
    handleCo() {
      this.$router.push({
        path: '/user/agreementCo',
      });
      this.show = false;
    },
    // 注册
    handleRegister() {
      if (this.loginForm.type == '' || this.loginForm.type.trim() == '') {
        this.$message.error('请选择账号类型！');
        return false;
      }
      if (
        this.loginForm.nickname == '' ||
        this.loginForm.nickname.trim() == ''
      ) {
        this.$message.error('账号不能为空！');
        return false;
      }
      if (
        this.loginForm.password == '' ||
        this.loginForm.password.trim() == ''
      ) {
        this.$message.error('密码不能为空！');
        return false;
      }
      //  else if (!this.CheckPassWord(this.loginForm.password)) {
      //     this.$message.error('密码为字母加数字且长度不小于8位！');
      //     return false
      // }
      else if (this.loginForm.password != this.loginForm.password2) {
        this.$message.error('两次密码不一致！');
        return false;
      }
      if (this.loginForm.mobile == '' || this.loginForm.mobile.trim() == '') {
        this.$message.error('请输入手机号！');
        return false;
      } else {
        let regPhone = /[13,15,18]\d{9}/;
        if (!regPhone.test(this.loginForm.mobile)) {
          this.$message.error('手机号格式不正确！');
          return false;
        }
      }
      if (this.loginForm.code == '' || this.loginForm.code.trim() == '') {
        this.$message.error('请填写验证码！');
        return false;
      }
      if (this.loginForm.type == 2) {
        if (
          this.loginForm.credit_code == '' ||
          this.loginForm.credit_code.trim() == ''
        ) {
          this.$message.error('请输入信用代码！');
          return false;
        } else if (
          this.loginForm.business_license == '' ||
          this.loginForm.business_license.trim() == ''
        ) {
          this.$message.error('请上传营业执照！');
          return false;
        }
      }
      if (!this.isPass) {
        this.$message.error('请勾选协议！');
        return false;
      }

      userRegister(this.loginForm).then((item) => {
        if (item && item.code == 200) {
          this.$message({
            message: item.msg,
            type: 'success',
          });

          setToken(item.data.userinfo.token);
          this.$store.commit('SET_TOKEN', item.data.userinfo.token);
          this.$store.commit('SET_USERINFO', item.data.userinfo);
          this.show = false;
        }
        console.log(item, 'handleRegister');
      });
    },
    // 忘记密码
    handleForget() {
      if (this.loginForm.mobile == '' || this.loginForm.mobile.trim() == '') {
        this.$message.error('请输入手机号！');
        return false;
      } else {
        let regPhone = /[13,15,18]\d{9}/;
        if (!regPhone.test(this.loginForm.mobile)) {
          this.$message.error('手机号格式不正确！');
          return false;
        }
      }
      if (this.loginForm.code == '' || this.loginForm.code.trim() == '') {
        this.$message.error('请填写验证码！');
        return false;
      }
      if (
        this.loginForm.password == '' ||
        this.loginForm.password.trim() == ''
      ) {
        this.$message.error('密码不能为空！');
        return false;
      }
      // else if (!this.CheckPassWord(this.loginForm.password)) {
      //     this.$message.error('密码为字母加数字且长度不小于8位！');
      //     return false
      // }
      else if (this.loginForm.password != this.loginForm.password2) {
        this.$message.error('两次密码不一致！');
        return false;
      }

      userResetpwd({
        mobile: this.loginForm.mobile,
        newpassword: this.loginForm.password2,
        code: this.loginForm.code,
      }).then((item) => {
        if (item && item.code == 200) {
          this.$message({
            message: item.msg,
            type: 'success',
          });
          setToken(item.data.userinfo.token);
          this.$store.commit('SET_TOKEN', item.data.userinfo.token);
          this.$store.commit('SET_USERINFO', item.data.userinfo);
          this.show = false;
        }
      });
      // 忘记密码请求
    },
    // 登录
    handleLogin() {
      if (this.loginForm.remember) {
        localStorage.setItem('mobile', this.loginForm.mobile);
        localStorage.setItem('password', this.loginForm.password);
      } else {
        localStorage.removeItem('mobile');
        localStorage.removeItem('password');
      }
      userLogin({
        mobile: encrypt(this.loginForm.mobile),
        password: encrypt(this.loginForm.password),
      }).then((item) => {
        if (item && item.code == 200) {
          this.$message({
            message: item.msg,
            type: 'success',
          });
          setToken(item.data.userinfo.token);
          this.$store.commit('SET_TOKEN', item.data.userinfo.token);
          this.$store.commit('SET_USERINFO', item.data.userinfo);
          this.show = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 30px;
  overflow: hidden;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;

    .el-input__suffix-inner {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}

.login-body {
  width: 821px;
  transition: all 0.5s;
  background-color: #ebebeb;

  &-left {
    width: 362px;
    height: 100%;

    .login-label {
      color: #000;
      font-size: 16px;
      font-weight: 600;
    }

    .login-sub-label {
      color: #818181;
      font-size: 12px;
    }

    > img {
      width: 120px;
      height: 120px;
    }
  }

  &-right {
    height: 100%;
    background-color: #fff;

    .login-title {
      height: 60px;
      border-bottom: 1px solid #d9d9d9;
      position: relative;

      .func-item {
        width: 120px;
        text-align: center;
        color: #909090;
        font-size: 16px;
        font-weight: 600;

        &:hover {
          cursor: pointer;
          color: #335fbe;
        }
      }

      .checked {
        color: #193980;
      }

      > i {
        position: absolute;
        right: 27px;
        top: 20px;
        font-size: 20px;

        &:hover {
          cursor: pointer;
          color: #0b4bb7;
        }
      }

      .unBorder {
        position: absolute;
        bottom: -1px;
        left: 0;
        height: 2px;
        width: 80px;
        background: linear-gradient(270deg, #0b4bb7 0%, #356cc4 100%);
      }

      .move_right {
        animation: rightmove 0.5s forwards;
      }

      .move_left {
        animation: leftmove 0.5s forwards;
      }

      @keyframes rightmove {
        0% {
          transform: translate(20px);
        }

        100% {
          transform: translateX(140px);
        }
      }

      @keyframes leftmove {
        0% {
          transform: translate(140px);
        }

        100% {
          transform: translateX(20px);
        }
      }
    }

    .login-main {
      padding: 20px 30px;

      span {
        user-select: none;
        color: #466ec5;
        font-size: 10px;
        font-weight: 400;

        &:hover {
          cursor: pointer;
          color: #0b4bb7;
        }
      }

      .license {
        width: 100%;
        height: 100%;
        border-radius: 7px;
      }

      .uploader {
        width: 398px;
        min-height: 48px;
        text-align: center;
        line-height: 48px;
        border-radius: 7px;
        background-color: #fbfbfb;
        border: 1px dashed #d9d9d9;
        color: #bdbdbd;

        &:hover {
          color: #0b4bb7;
          cursor: pointer;
          border: 1px dashed #0b4bb7;
        }
      }

      .login-btn {
        width: 100%;
        height: 40px;
        border-radius: 7px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        background-color: #466ec5;

        &:hover {
          cursor: pointer;
          background-color: #0b4bb7;
        }

        &:active {
          background-color: #193980;
        }
      }

      .login-code {
        user-select: none;
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
        color: #466ec5;

        &:hover {
          cursor: pointer;
          color: #0b4bb7;
        }

        &:active {
          color: #193980;
        }
      }
    }
  }
}
</style>
